<template>
  <div class="c-percentage-number">
    <div>{{ label }}</div>
  </div>
</template>

<script>
import { play } from './animations/number';
export default {
  name: 'DproPercentageNumber',
  props: {
    number: {
      type: [String, Number],
      default: () => '0'
    },

    unit: {
      type: String,
      default: () => '%'
    },

    title: {
      type: String,
      default: () => '设备在线率'
    },

    isUnit: {
      type: Boolean,
      default: () => false
    },

    color: {
      type: Boolean,
      default: () => false
    },

    duration: {
      type: Number,
      default: () => 1000
    }
  },
  data() {
    return {
      currentNumber: 0
    }
  },
  computed: {
    label() {
      return this.isUnit ? `${ this.currentNumber || 0 }${this.unit}` : this.currentNumber;
    }
  },
  watch: {
    number(value) {
      this.animate(value);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.delayAnimate(this.number);
    })
  },
  methods: {
    animate(number) {
      if(this.currentNumber === number) return;
      play(this.currentNumber, number, 'int', this.duration, p => {
        this.$nextTick(() => {
          this.currentNumber = p;
        })
      })
    },
    delayAnimate(number) {
      this.$nextTick(() => {
        this.animate(number);
        this.currentNumber = this.number;
      })
    }
  }
}
</script>

<style lang="less" scoped>
.c-percentage-number {
  display: inline-block;
  &__title {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    text-align: left;
    line-height: 18px;
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 22px;
  }
}

</style>